<template>
    <div class="openRecord">
        <div class="top">
            <van-icon name="arrow-left" size="20px" @click="goback()" />
            <div>开门记录</div>
        </div>
        <div class="mian">
            <!-- <ul>
                <li>
                    <img src="../assets/img/key.png" alt="">
                    <span>小区大门</span>
                    <span class="open">开锁</span>
                </li>
            </ul> -->

            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                <van-cell v-for="(item,index) in list" :key="index">
                    <!-- 使用 title 插槽来自定义标题 -->
                    <template slot="title">
                        <img src="../assets/img/key.png" alt="">
                        <span>{{item.deviceName}}</span>
                        <span class="open">{{item.create_time1}}</span>
                    </template>
                </van-cell>
            </van-list>
            <!-- <van-cell-group>
                <van-cell v-for="(item,index) in list" :key="index">
                  
                    <template slot="title">
                        <img src="../assets/img/key.png" alt="">
                        <span>{{item.deviceName}}</span>
                        <span class="open">{{item.create_time1}}</span>
                    </template>
                </van-cell>
            </van-cell-group> -->

        </div>
    </div>
</template>
<script>
    import { List } from 'vant';
    import { mapState, mapMutations } from 'vuex'
    import { Step, Steps } from 'vant'
    import { Icon } from 'vant'
    import { Toast } from "vant"

    export default {
        // 当前组件的名称
        name: 'usehelp',

        data() {
            return {
                list: [],
                loading: false,
                finished: false,
                total: "",
                pageSize: "",
                pageNum: 0,
                hasNextPage: true
            }
        },

        // 在当前组件中添加其他的自定义组件
        components: {

        },

        /*
            在computed中添加mapState
            如果computed中只有一个辅助函数，后面可以直接写成函数名
        */
        computed: {
            ...mapState(['userid']),
        },
        methods: {
            onLoad() {
                setTimeout(() => {
                    if (this.hasNextPage) {


                        // 异步更新数据
                        // setTimeout(() => {
                        //     for (let i = 0; i < 10; i++) {
                        //         this.list.push(this.list.length + 1);
                        //     }
                        //     // 加载状态结束
                        //     this.loading = false;

                        //     // 数据全部加载完成
                        //     if (this.list.length >= 40) {
                        //         this.finished = true;
                        //     }
                        // }, 500);
                        this.loading = true;
                        this.$axios.get("/open/getopendoorlog", {
                            params: {
                                user_id: this.userid,
                                pageNum: this.pageNum + 1,
                                pageSize: 18
                            }
                        }).then(res => {
                            console.log(res)
                            const { status, data, message } = res
                            if (status == 200 && data.code == 200) {
                                this.loading = false;
                                const { total, pageSize, pageNum, list, hasNextPage } = data.data
                                for (let i = 0; i < list.length; i++) {
                                    this.list.push(list[i])
                                }
                                // this.list.push(...list)
                                // a.push.apply(a,b);
                                // this.list.push.apply(this.list,list)
                                this.total = total;
                                this.pageSize = pageSize;
                                this.pageNum = pageNum
                                this.hasNextPage = hasNextPage
                                if (!this.hasNextPage) {
                                    this.finished = true;
                                }
                            } else {
                                Toast(message)
                            }
                        })
                    } else {
                        this.finished = true;
                        // this.loading = true;
                    }

                }, 500)

            },
            // getOpenlist() {
            //     this.$axios.get("/open/getopendoorlog", {
            //         params: {
            //             user_id: this.userid,
            //             pageSize: 12
            //         }
            //     }).then(res => {
            //         console.log(res)
            //         const { status, data, message } = res
            //         if (status == 200 && data.code == 200) {
            //             const { total, pageSize, pageNum, list, hasNextPage } = data.data
            //             this.list = list;
            //             this.total = total;
            //             this.pageSize = pageSize;
            //             this.pageNum = pageNum;
            //             this.hasNextPage = hasNextPage
            //         } else {
            //             Toast(message)
            //         }
            //     })
            // },
            goFeedback() {
                this.$router.push('feedback')
            },
            goback() {
                this.$router.back()
            },
            opendoor() {
                Toast("门开啦")
            }

        },
        // 生命周期函数,创建实例,可以获取this,但DOM节点还没有创建出来
        created() {
            console.log('created', this.$el)
        },
        // 生命周期函数,当前组件上的所有DOM节点都已经创建出来
        mounted() {
            // this.getOpenlist()
            console.log('mounted', this.$el)

            // 监听页面滚动,显示返回顶部的图标
            // window.onscroll = this.onScroll

            // 请求获取轮播图
            //this.reqSwiperItems()
            // 请求获取商品列表的第一页
            //this.reqGoodsList()

            // 获取存在本地的token
            // const token = localStorage.getItem('token')
            // 把token存到当前组件的data中
            // this.token = token

            // 从store中获取最新的token
            // this.token = this.$store.state.token

            // console.group('-----------睁大你的狗眼-----------')
            // console.log('home里面的token为',this.token)
            // console.groupEnd()
        },
        // 生命周期函数,当数据发生改变并且导致视图发生相应的改变
        updated() {
            // console.log('updated')
        },
        // 生命周期函数,组件被销毁
        destroyed() {
            console.log('destroyed')
        },
        // 生命周期函数,进入缓存组件
        activated() {
            console.log('activated')
            this.getExamine()
            this.username = this.userPhone
            // 再次回来的时候,直接滚动到之前离开时候保存的位置


            // 如果每次进入缓存组件的时候，需要实时更新当前组件中的内容，可以将这些更新代码写在activated

            // 请求获取用户信息
            // this.reqUserInfo()
            // this.$store.dispatch('changeUserInfo2')

        },
        // 生命周期函数,离开缓存组件
        deactivated() {
            console.log('deactivated')

            // 不要尝试去获取页面的scrollTop,因为页面只有一个,跳转到新的路由,页面的scrollTop会变成0
            // 所以,在离开的时候,把当前组件的scrollTop保存下来,赋给一个新的变量
            // this.cache_scrollTop = this.scrollTop
        },
        // 离开路由之前,它会在deactivated之前调用
        beforeRouteLeave(to, from, next) {
            console.log('beforeRouteLeave')

            // 1.获取页面的scrollTop,赋给一个新的变量
            // this.cache_scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            // 2.获取顶部状态栏距离父元素底部的距离,赋给一个新的变量


            // 必须调用next,否则就不会离开当前路由
            next()
        }
    }
</script>

<!-- 添加scoped属性,将样式的作用域限制在当前组件内,不会影响子组件 -->
<style lang="scss" scoped>
    .openRecord {
        margin-top: 40px;
    }

    .top {

        height: 40px;
        line-height: 40px;
        position: fixed;
        font-size: 16px;
        border-bottom: 1px solid #999;
        margin-bottom: .3rem;
        top: 0px;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .top div {
        text-align: center;
    }

    .van-icon-arrow-left {
        position: absolute;
        top: 10px;

    }

    .mian {
        /* width: 90%; */
        margin: 10px auto 20px;

        /* ul {

        } */
    }

    .van-cell__title {
        height: .72rem;
        line-height: .72rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>